import React, { memo } from "react";
import type { FC, ReactNode } from "react";
import { MusiciLoverWrapper } from "./style";
import AreaItemv2 from "@/components/area-itemv2";
import { useNavigate } from "react-router-dom";

interface IProps {
  children?: ReactNode;
  tranks: any[],
  detail?: any
}

const MusicLover: FC<IProps> = (props: IProps) => {
  const { tranks, detail } = props
  const navigate = useNavigate()
  const handleNavigate = () => {
    navigate('/musiclibrary/linkesongs')
  }
  return <MusiciLoverWrapper>
    <div className="liked-songs" onClick={handleNavigate}>
      <div className="liked-top">
        <p></p>
      </div>
      <div className="liked-bottom">
        <div className="titles">
          <div className="title-top">我喜欢的音乐</div>
          {detail && <div className="title-bottom">{detail?.trackCount}首歌</div>}
        </div>
        <button className="player-img">
          <img src={require("@/assets/img/play.png")} alt="" />
        </button>
      </div>
    </div>
    <div className="songs">
      {
        tranks.map(item => (
          <AreaItemv2 songItem={item} key={item.id} />
        ))
      }
    </div>
  </MusiciLoverWrapper>;
};

export default memo(MusicLover);